<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Web 全屏模式 将手机顶部的状态栏隐藏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 手机状态栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 忽略页面中的数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no"/>
    <!-- 添加视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>虚构类 | fictions</title>
    <link rel="stylesheet" href="style/fiction.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 头部 -->
<header class="header">
    <div class="left">
        <a href="#"><img src="images/logo.png" alt=""></a>
    </div>
    <div class="center">
        <p >豆瓣App</p >
        <p>记录你的书影音生活</p>
    </div>
    <div class="right">
        <a href="#">打开App</a>
    </div>
</header>

<!-- 主体 -->
<div class="main scope">
    <div class="cate-header">
        <h2>最受关注图书 | 虚构类</h2>
    </div>
    <div class="cate-list">
        <ul>
            <li v-for="(book, bindex) in books" :key="bindex">
                <a href="details.html">
                    <div class="book-img">
                        <img :src="book.imgSrc" alt="">
                    </div>
                    <div class="book-details">
                        <h3>{{book.name}}</h3>
                        <div class="score-stars">
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-gray"></span>
                            </span>
                            <span class="score">{{book.score}}</span>
                        </div>
                        <p>{{book.author}} | {{book.press}}/{{book.time}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

<script src="js/fiction.js"></script>
</body>
</html>